import React from 'react';
import { Formik, Form } from 'formik';
import { useNavigate } from 'react-router-dom';
import Button from '../../shared/ui/Button/Button';
import authServices from '../../services/authServices';
import { validationSchema } from './LoginPage.validation';
import Field from '../../shared/ui/Field/Field';
import Textfield from '../../shared/ui/Textfield/Textfield';
import { FormikField } from '../../components/FormikField/FormikField';
import { StyledErrorText } from './ErrorText.styled';
import Flex from '../../shared/ui/Flex/Flex';
import { inputErrors } from '../../constants/inputErrors';
import styles from './LoginPage.module.scss';

/**
 * @function LoginPage - Страница входа.
 * @returns { React.JSX.Element } - Страница входа.
 */
const LoginPage = (): React.JSX.Element => {

    const navigate = useNavigate();

    /**
     * Отображение ошибки ввода.
     */
    const [showError, setShowError] = React.useState<boolean>(false);

    /**
     * Сообщение при ошибке ввода пароля.
     */
    const [errorMessage, setErrorMessage] = React.useState<string>("");

    /**
     * @function handlerChangeInputField - Обработчик изменения поля ввода.
     * @returns { void }
     */
    const handlerChangeInputField = () => {
        setShowError(false);
    }

    /**
     * @async 
     * @function loginRequest - Асинхронная функция для входа пользователя в систему.
     * @param {Object} values - Объект с данными пользователя.
     * @param {string} values.username - Имя пользователя.
     * @param {string} values.password - Пароль пользователя.
     * @returns {Promise<void>} Промис без возвращаемого значения, 
     *                          который выполняется при успешном входе 
     *                          или выбрасывает ошибку.
     */
    const loginRequest = async (values: { username: string, password: string }): Promise<void> => {

        try {
            await authServices.login(values);
            navigate("/");
        } catch (error) {
            setErrorMessage(error?.response?.data?.message);
            setShowError(true);
        }
    };

    return (
        <div className={styles.loginPage}>
            <h1>Вход</h1>
            <Formik
                initialValues={{ username: '', password: '' }}
                validationSchema={validationSchema}
                onSubmit={loginRequest}
            >
                {({ handleSubmit }) => (

                    <Form onSubmit={(event) => {
                        event.preventDefault();
                        handleSubmit();
                    }}>
                        <div className={styles.inputContainer}>
                            <Field label="Имя пользователя">
                                <FormikField name='username'>
                                    <Textfield onInput={handlerChangeInputField} />
                                </FormikField>
                            </Field>
                            <Field label="Пароль">
                                <FormikField name="password">
                                    <Textfield type="password" onInput={handlerChangeInputField} />
                                </FormikField>
                            </Field>
                            <Flex justifyContent="flex-end" alignItems="center">
                                {showError && <StyledErrorText>{inputErrors[errorMessage]}</StyledErrorText>}
                                <Button type="submit">Отправить</Button>
                            </Flex>
                        </div>
                    </Form>
                )}
            </Formik>
        </div>
    )
};

export default LoginPage;
